<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            margin: 0;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .sidebar {
            width: 200px;
            background-color: #333;
            color: #fff;
            padding-top: 20px;
            overflow-y: auto;
        }
        .sidebar h2 {
            text-align: center;
            font-size: 1.5em;
            color: #f39c12;
            padding: 10px 0;
        }
        .menu-item {
            padding: 10px;
            cursor: pointer;
            border-top: 1px solid #444;
        }
        .menu-item:hover {
            background-color: #444;
        }
        .submenu {
            display: none;
            padding-left: 20px;
        }
        .submenu-item {
            padding: 10px 0;
            cursor: pointer;
            color: #bbb;
        }
        .submenu-item:hover {
            color: #fff;
        }
        .content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
        h2 {
            color: #333;
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input, .form-group select, .form-group button {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        .form-group button {
            background-color: #f39c12;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        .gallery {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .gallery img {
            width: 150px;
            height: 150px;
            object-fit: cover;
            transition: transform 0.3s;
        }
        .gallery img:hover {
            transform: scale(1.05) rotate(1deg);
            animation: shake 0.3s;
        }
        @keyframes shake {
            0% { transform: translate(1px, 1px) rotate(0deg); }
            25% { transform: translate(-1px, -2px) rotate(-1deg); }
            50% { transform: translate(-3px, 0px) rotate(1deg); }
            75% { transform: translate(2px, 2px) rotate(0deg); }
            100% { transform: translate(0px, 0px) rotate(0deg); }
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background-color: #fff;
        }
        table, th, td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f39c12;
            color: white;
        }
    </style>
</head>
<body>

<div class="sidebar">
    <h2>管理系统</h2>
    <div class="menu-item" onclick="toggleMenu('userMenu')">用户管理</div>
    <div class="submenu" id="userMenu">
        <div class="submenu-item" onclick="showPage('userReg')">用户注册</div>
    </div>
    <div class="menu-item" onclick="showPage('gallery')">相册展示</div>
    <div class="menu-item" onclick="showPage('product')">商品管理</div>
</div>

<div class="content">
    <div id="userReg" class="page">
        <h2>用户注册</h2>
        <div class="form-group">
            <label for="email">电子邮箱</label>
            <input type="email" id="email" required>
        </div>
        <div class="form-group">
            <label for="nickname">昵称</label>
            <input type="text" id="nickname" required>
        </div>
        <div class="form-group">
            <label for="province">选择省市</label>
            <select id="province">
                <option value="">请选择</option>
                <option value="北京市">北京市</option>
                <option value="上海市">上海市</option>
                <option value="广东省">广东省</option>
            </select>
        </div>
        <div class="form-group">
            <label for="avatar">上传头像</label>
            <input type="file" id="avatar" accept="image/*" onchange="previewAvatar(event)">
            <img id="avatarPreview" src="" alt="头像预览" style="display:none;width:100px;height:100px;margin-top:10px;border-radius:50%;object-fit:cover;">
        </div>
        <button onclick="registerUser()">添加用户</button>
        <div id="userList"></div>
    </div>

    <div id="gallery" class="page" style="display:none;">
        <h2>相册展示</h2>
        <div class="gallery">
            <img src="https://via.placeholder.com/150" alt="Image 1">
            <img src="https://via.placeholder.com/150" alt="Image 2">
            <img src="https://via.placeholder.com/150" alt="Image 3">
            <img src="https://via.placeholder.com/150" alt="Image 4">
        </div>
    </div>

    <div id="product" class="page" style="display:none;">
        <h2>商品管理</h2>
        <div class="form-group">
            <label for="productName">商品名称</label>
            <input type="text" id="productName">
        </div>
        <div class="form-group">
            <label for="productPrice">价格</label>
            <input type="number" id="productPrice">
        </div>
        <div class="form-group">
            <label for="productStock">库存数量</label>
            <input type="number" id="productStock">
        </div>
        <button onclick="addProduct()">添加商品</button>
        <input type="text" id="searchProduct" placeholder="搜索商品..." oninput="searchTable()">
        <button onclick="selectAllProducts()">全选</button>
        <button onclick="deselectAllProducts()">反选</button>
        <button onclick="deleteSelectedProducts()">删除选中</button>
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" id="selectAll" onclick="toggleSelectAll(this)"></th>
                    <th>ID</th>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>库存数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="productTableBody">
                <!-- 商品数据 -->
            </tbody>
        </table>
    </div>
</div>

<script>
    function toggleMenu(menuId) {
        document.querySelectorAll('.submenu').forEach(menu => {
            if (menu.id === menuId) {
                menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
            } else {
                menu.style.display = 'none';
            }
        });
    }

    function showPage(pageId) {
        document.querySelectorAll('.page').forEach(page => {
            page.style.display = page.id === pageId ? 'block' : 'none';
        });
    }

    function registerUser() {
        const email = document.getElementById('email').value;
        const nickname = document.getElementById('nickname').value;
        const province = document.getElementById('province').value;
        
        if (!email || !nickname || !province) {
            alert('请填写所有字段');
            return;
        }

        const userList = document.getElementById('userList');
        const newUser = document.createElement('div');
        newUser.textContent = `邮箱: ${email}, 昵称: ${nickname}, 省市: ${province}`;
        userList.appendChild(newUser);
        
        document.getElementById('email').value = '';
        document.getElementById('nickname').value = '';
        document.getElementById('province').selectedIndex = 0;
        document.getElementById('avatar').value = '';
        document.getElementById('avatarPreview').style.display = 'none';
    }

    function previewAvatar(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const img = document.getElementById('avatarPreview');
                img.src = e.target.result;
                img.style.display = 'block';
            };
            reader.readAsDataURL(file);
        }
    }

    let currentProductId = 0;

    function addProduct() {
        const productName = document.getElementById('productName').value;
        const productPrice = document.getElementById('productPrice').value;
        const productStock = document.getElementById('productStock').value;
        
        if (!productName || !productPrice || !productStock) {
            alert('请填写所有字段');
            return;
        }

        const productTableBody = document.getElementById('productTableBody');
        const newRow = document.createElement('tr');
        newRow.innerHTML = `
            <td><input type="checkbox" class="selectProduct"></td>
            <td>${++currentProductId}</td>
            <td>${productName}</td>
            <td>${productPrice}</td>
            <td>${productStock}</td>
            <td>
                <button onclick="editProduct(this)">编辑</button>
                <button onclick="deleteProduct(this)">删除</button>
            </td>`;
        productTableBody.appendChild(newRow);
        
        document.getElementById('productName').value = '';
        document.getElementById('productPrice').value = '';
        document.getElementById('productStock').value = '';
    }

    function editProduct(button) {
        const row = button.parentNode.parentNode;
        const nameCell = row.children[2];
        const priceCell = row.children[3];
        const stockCell = row.children[4];

        const newName = prompt("请输入新的商品名称", nameCell.textContent);
        const newPrice = prompt("请输入新的价格", priceCell.textContent);
        const newStock = prompt("请输入新的库存数量", stockCell.textContent);

        if (newName && newPrice && newStock) {
            nameCell.textContent = newName;
            priceCell.textContent = newPrice;
            stockCell.textContent = newStock;
        }
    }

    function deleteProduct(button) {
        if (confirm("确定要删除这个商品吗？")) {
            const row = button.parentNode.parentNode;
            row.remove();
        }
    }

    function searchTable() {
        const filter = document.getElementById('searchProduct').value.toLowerCase();
        const rows = document.getElementById('productTableBody').querySelectorAll('tr');
        rows.forEach(row => {
            const productName = row.cells[2].textContent.toLowerCase();
            row.style.display = productName.includes(filter) ? '' : 'none';
        });
    }

    function toggleSelectAll(checkbox) {
        const checkboxes = document.querySelectorAll('.selectProduct');
        checkboxes.forEach(cb => cb.checked = checkbox.checked);
    }

    function selectAllProducts() {
        const checkboxes = document.querySelectorAll('.selectProduct');
        checkboxes.forEach(cb => cb.checked = true);
    }

    function deselectAllProducts() {
        const checkboxes = document.querySelectorAll('.selectProduct');
        checkboxes.forEach(cb => cb.checked = !cb.checked);
    }

    function deleteSelectedProducts() {
        const checkedBoxes = document.querySelectorAll('.selectProduct:checked');
        if (checkedBoxes.length === 0) {
            alert('请至少选择一个商品进行删除');
            return;
        }
        if (confirm("确定要删除选中的商品吗？")) {
            checkedBoxes.forEach(cb => {
                const row = cb.parentNode.parentNode;
                row.remove();
            });
        }
    }
</script>

</body>
</html>
